<template>
  <button>Hello, {{ name }}</button>
</template>

<script>
import { onMounted, onUpdated, toRefs, toRef } from "vue";

export default {
  props: ["name", "age"],

  /**
   * 第一个参数，是一个 Proxy 数据的 props
   *
   * 1. props 是一个 Proxy 代理对象，不要对他做解构，会丢失响应式
   */
  // setup({ name }) {
  //   // 组合式API中是获取不到组件的实例this的
  //   console.log("Hello this", this);

  //   console.log("Hello props", name);

  //   onMounted(() => {
  //     document.title = name;
  //   });
  //   onUpdated(() => {
  //     console.log("onUpdated name", name);
  //     document.title = name;
  //   });
  // },

  setup(props) {
    // 如果就是需要对 props 做解构，需要借助 toRefs 或 toRef 工具函数
    // const { name } = toRefs(props);
    const name = toRef(props, "name");

    /**
     * toRefs 与 toRef
     * toRefs 将一个 Proxy 代理对象中的每一项属性都转换成 Ref 数据，并组装成一个普通的对象
     * toRef  将一个 Proxy 代理对象中的具体属性转换成 Ref 数据，并返回
     */
    const obj = toRefs(props);
    console.log("obj", obj);

    onMounted(() => {
      document.title = name.value;
    });
    onUpdated(() => {
      console.log("onUpdated name", name);
      document.title = name.value;
    });
  },
};
</script>
